<template>
	<view>
		<!-- 顶部导航栏 -->
		<u-navbar :is-back="false" title="" :background="{ 'background': '#F3F4F6' }">
			<view class="slot-wrap">
				<image src="/static/metting/close.png" class="right" @click="back()" ></image>
				<image src="/static/metting/zoom.png" class="right" @click="back()" ></image>
				<view class="top-title">
					<text style="margin-left: 70rpx;">会议中</text> 
				</view>
			</view>
			<view slot="right">
				<view class="flexalign">
					<view class="frame-record flexal" v-if="tipsRecord">
						<view class="record-icon flexcen">
							<view class="icon"></view>
						</view>
						<view class="text">录制中</view>
					</view>
					<view style="font-weight: 500;font-size: 32rpx;color: #2953E7;margin-right: 32rpx;" @click="mettingShow = !mettingShow">结束</view>
				</view>
			</view>
		</u-navbar>
		<!-- 会议名称/参会时间 -->
		<view class="flexcumal">
		<u-input v-model="value" :type="type" :border="border" 
		class="frame-input"
		disabled
		:custom-style="{'text-align': 'center','border-bottom': '1rpx solid #B7B7B7','width': '404rpx','font-size': '40rpx','color': '#535353'}"
		 placeholder="请输入会议名称" />
		 <view class="frame-time">10:20</view>
		 <view class="record-tips flexal" v-if="recordShow">
			 <view style="margin-left: 40rpx;flex: 1;">
			 <view class="flexal">
				 <view style="font-size: 36rpx;">会议录制中</view>
				 <image src="/static/metting/bell.png" style="width: 29rpx;height: 36rpx;margin-left: 25rpx;"></image>
			 </view>
			 <view style="font-size: 26rpx;font-weight: 400;width: 425rpx;margin-top: 10rpx;">会议结束后可在历史会议-会议录制中查看录制文件</view>
			 </view>
			 <view class="button flexcen" @click="recordShow = !recordShow">我知道了</view>
		 </view>
		</view>
		<!-- 参会人头像/名称 -->
	
		<view class="frame-content"> 
			<view class="content-item flexcumal" v-for="(item,index) in list " :key="index">
				<image :src="item.avatar" class="img-avatar"></image>
				<view class="flexal" style="margin-top: 10rpx;">
					<text class="text">{{item.name}}</text>
					<image src="/static/metting/stopAudio.png" v-if="item.checked" style="width: 24rpx;height: 30rpx;margin-left: 5rpx;"></image>
					<image src="/static/metting/payAudio.png" v-else style="width: 24rpx;height: 30rpx;margin-left: 5rpx;"></image>
				</view>
			</view>
		</view>

		<!-- 说点什么 -->
		<view class="message-block flexal">
		<view class="frame-message flexal" @click="openMessagePop = !openMessagePop">
			<image src="/static/metting/face.png" class="img-face"></image>
			<view class="frame-line"></view>
			<view class="message-text">说点什么</view>
		</view>
		<view class="frame-hand flexcen" v-if="handShow" @click="handShowPop = !handShowPop">
			<image src="/static/metting/hand.png" class="img-hand"></image>
		</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="frame-buttom flexal">
			<view class="buttom-item flexcumal" v-for="(item,index) in opt" :key="index" @click="openOpt(item,index)">
				<view class="frame-people" v-if="index == 3">6</view>
				<image :src="item.icon" v-if="item.checked" class="buttom-icon"></image>
				<image :src="item.chooseIcon" v-else class="buttom-icon"></image>
				<view style="margin-top: 10rpx;">{{item.text}}</view>
			</view>
		</view>
		
		<!-- 更多操作弹窗 -->
		<u-mask :show="show" @click="show = false">
			
				<view class="warp">
					<view>
					<view class="frame-video" style="margin-bottom: 32rpx;padding: 32rpx 27rpx;display: flex;flex-wrap: wrap;height: 428rpx;">
						<view class="flexcumal video-item" v-for="(item,index) in moreList" :key="index" @click="goMore(item,index)">
							<image :src="item.icon" class="icon"></image>
							<view class="frame-text">{{item.text}}</view>
						</view>
					</view>
					<view class="frame-video flexcumal" style="height: 94rpx;" @click="handShow = !handShow">
						<view class="text flexcenter">
							<image src="/static/metting/hand.png" style="width: 35rpx;height: 49rpx;"></image>
							<view style="font-weight: 400;font-size: 30rpx;color: #333333;margin-left: 21rpx;">举手</view>
						</view>
					</view>
					<view class="frame-video-cancel flexcenter">
						取消
					</view>
					</view>
			</view>
		</u-mask>
		
		<!-- 参会人弹窗 -->
		<mettingPopVue :openPop="openPop" :list="list"></mettingPopVue>
		
		<!-- 邀请弹窗 -->
		<mettingPopVue :openInvitePop="openInvitePop" :list="list"></mettingPopVue>
		<!-- 聊天弹窗 -->
		<messageVue :openPop="openMessagePop"></messageVue>
		
		<!-- 离开/结束会议 -->
		<u-mask :show="mettingShow" @click="mettingShow = false">
			
				<view class="warp">
					<view>
					<view class="frame-video flexcumal">
						<view class="text flexcenter" style="color: #366EF4;">离开会议</view>
						<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
						<view class="text flexcenter" style="color: #E25551;">结束会议</view>
					</view>
					<view class="frame-video-cancel flexcenter" @click="mettingShow = !mettingShow">
						取消
					</view>
					</view>
			</view>
		</u-mask>
		
		<!-- 是否确定将手放下 -->
		<u-mask :show="handShowPop" @click="handShowPop = false">
			
				<view class="warp">
					<view>
					<view class="frame-video flexcumal">
						<view class="text flexcenter" style="color: #858A99;">确定将手放下吗？</view>
						<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
						<view class="text flexcenter" style="color: #366EF4;" @click="handShow = !handShow">手放下</view>
					</view>
					<view class="frame-video-cancel flexcenter" style="color: #366EF4;" @click="handShowPop = !handShowPop">
						取消
					</view>
					</view>
			</view>
		</u-mask>
		
		<!-- 是否开启录制 -->
		<u-popup v-model="showPop" mode="center" border-radius="24">
				<view class="Pop-frame flexcolumnalign">
					<view class="title">是否开启录制？</view>
					<view class="flexal" style="margin-top: 50rpx;">
					<!-- <u-checkbox @change="checkboxChange" :name="'all'" v-model="checked" :shape="'circle'" >允许成员自我解除静音</u-checkbox> -->
					<view class="text">开启后，可在历史会议-会议录制中查看</view>
					</view>
					<view style="padding: 32rpx 0rpx;margin-top: 20rpx;">
					<u-line color="#3C3C43" length="622rpx"/>
					</view>
					<view style="display: flex;width: 100%;">
						<view class="button" @click="showPop = false">取消</view>
						<view class="line"></view>
						<view class="button" style="color: #0052D9;" @click="openRecord">开启</view>
					</view>
				</view>
		</u-popup>
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
	</view>
</template>

<script>
	import mettingPopVue from '../../components/mettingPop/mettingPop.vue'
	import messageVue from '../../components/message/message.vue'
	export default {
		data() {
			return {
				value: '会议名称会议名称',
				type: 'text',
				border: false,
				avatar:'https://cdn.uviewui.com/uview/album/10.jpg',
				show:false,
				handShow:false,						//是否举手
				handShowPop:false,					//是否打开取消举手弹窗
				openMessagePop:false,				//聊天弹窗
				showPop:false,						//是否开启录制
				recordShow:false,					//录制提示弹窗
				tipsRecord:false,					//标题栏录制显示
				openInvitePop:false,				//邀请弹窗
				list:[
					{
						name:'王小二',
						avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
						content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'王小明',
						avatar:'https://cdn.uviewui.com/uview/album/2.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'李二',
						avatar:'https://cdn.uviewui.com/uview/album/3.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'张三',
						avatar:'https://cdn.uviewui.com/uview/album/4.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'老四',
						avatar:'https://cdn.uviewui.com/uview/album/5.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'王五',
						avatar:'https://cdn.uviewui.com/uview/album/6.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'老六',
						avatar:'https://cdn.uviewui.com/uview/album/7.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'老王',
						avatar:'https://cdn.uviewui.com/uview/album/8.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
					{
						name:'老李',
						avatar:'https://cdn.uviewui.com/uview/album/9.jpg',
						content:'文字内容内容内容',
						time:'14:00',
						checked:false
					},
				],
				opt:[
					{
						text:'静音',
						icon:'/static/metting/buttom1.png',
						chooseIcon:'/static/metting/buttomIcon1.png',
						checked:false,
					},{
						text:'摄像头',
						icon:'/static/metting/buttom2.png',
						chooseIcon:'/static/metting/buttomIcon2.png',
						checked:false,
					},{
						text:'共享屏幕',
						icon:'/static/metting/buttom3.png',
						chooseIcon:'/static/metting/buttomIcon3.png',
						checked:false,
					},{
						text:'参会人',
						icon:'/static/metting/buttom4.png',
						chooseIcon:'/static/metting/buttom4.png',
						checked:false,
					},{
						text:'更多',
						icon:'/static/metting/buttom5.png',
						chooseIcon:'/static/metting/buttom5.png',
						checked:false,
					},
				],
				moreList:[
					{
						icon:'/static/metting/invite.png',
						text:'邀请'
					},
					{
						icon:'/static/metting/message.png',
						text:'聊天'
					},
					{
						icon:'/static/metting/flie.png',
						text:'文档'
					},
					{
						icon:'/static/metting/record.png',
						text:'录制'
					},
					{
						icon:'/static/metting/vote.png',
						text:'投票'
					},
					{
						icon:'/static/metting/sign.png',
						text:'签到'
					},
				],
				openPop:false,
				mettingShow:false,					//是否离开/结束会议
				
			}
		},
		components:{
			mettingPopVue,			//参会人弹窗
			messageVue,				//聊天弹窗
		},
		methods: {
			// 打开操作栏
			openOpt(item,index){
				this.opt[index].checked = !this.opt[index].checked
				if(index == 4){
					this.show = !this.show
				}else if(index == 3){
					this.openPop = !this.openPop
				}
			},
			// 前往更多操作
			goMore(item,index){
				if(index == 5){
					this.go('/pages6/metting/startSign')
				}else if(index == 2){
					this.go('/pages6/metting/mettingFile')
				}else if(index == 3){
					this.showPop = !this.showPop
				}else if(index == 0){
					this.openInvitePop = !this.openInvitePop
				}else if(index == 1){
					this.openMessagePop = !this.openMessagePop
				}else if(index == 2){
					this.go('/pages6/metting/mettingFile')
				}else if(index == 4){
					this.go('/pages6/metting/createVote')
				}
			},
			openRecord(){
				this.showPop = false						
				this.recordShow = true
				this.tipsRecord = true
			}
		}
	}
</script>

<style lang="less">
	.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			/* flex: 1; */
			/* 如果您想让slot内容与导航栏左右有空隙 */
			/* padding: 0 30rpx; */
			.right{
				width: 54rpx;
				height: 54rpx;
				// transform: rotate(180deg); 
				margin-left: 18rpx;
			}
			.top-title{
				flex: 1;
				display: flex;
				flex-direction: column;
				width: 381rpx;
				font-weight: normal;
				font-size: 36rpx;
				color: #000000;
				text-align: center;
			}
		}
		
		.frame-time{
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #535353;
		}
		
		.frame-input{
			margin-top: 47rpx;
		}
		
		.frame-content{
			padding-left: 9rpx;
			padding-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			
			.content-item{
				width: 160rpx;
				margin-top: 54rpx;
				margin-left: 63rpx;
				.text{
					margin-left: 20rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #000000;
				}
			}
			
			.img-avatar{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
		}
		.frame-buttom{
			position: fixed;
			bottom: 0rpx;
			width: 750rpx;
			height: 110rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			.buttom-item{
				width: 20%;
				justify-content: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #6E6E6E;
			}
			.buttom-icon{
				width: 48rpx;
				height: 48rpx;
			}
			.frame-people{
				position: absolute;
				margin-left: 55rpx;
				margin-top: -70rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #4B4B4B;
				z-index: 10;
			}
		}
		
		.message-block{
			position: fixed;
			left: 0rpx;
			top: 80%;
	
		.frame-message{
			width: 233rpx;
			height: 75rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 13rpx 1rpx rgba(0,0,0,0.16);
			border-radius: 0rpx 16rpx 16rpx 0rpx;
			
			.img-face{
				margin-left: 26rpx;
				width: 34rpx;
				height: 34rpx;
			}
			.frame-line{
				margin-left: 18rpx;
				width: 0rpx;
				height: 33rpx;
				border: 1rpx solid #707070;
				opacity: 0.63;
			}
			.message-text{
				margin-left: 18rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #6E6E6E;
			}
		}
		.frame-hand{
			width: 86rpx;
			height: 75rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 13rpx 1rpx rgba(0,0,0,0.16);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-left: 24rpx;
			.img-hand{
				width: 34rpx;
				height: 48rpx;
			}
		}
		}
		.warp {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			height: 100%;
			.frame-video{
				  width: 686rpx;
				  height: 94rpx;
				  background: #FFFFFF;
				  border-radius: 24rpx 24rpx 24rpx 24rpx;
			}
			.text{
				width: 100%;
				height: 94rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}
			.frame-video-cancel{
				margin-top: 22rpx;
				margin-bottom: 60rpx;
				width: 686rpx;
				height: 94rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}
			.icon{
				width: 80rpx;
				height: 80rpx;
			}
			.frame-text{
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}
			.video-item{
				margin: 32rpx 39rpx;
			}
		}
		
		.warp {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			height: 100%;
			.frame-video{
				  width: 686rpx;
				  height: 188rpx;
				  background: #FFFFFF;
				  border-radius: 24rpx 24rpx 24rpx 24rpx;
			}
			.text{
				width: 100%;
				height: 94rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}
			.frame-video-cancel{
				margin-top: 22rpx;
				margin-bottom: 60rpx;
				width: 686rpx;
				height: 94rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}
		}
		.Pop-frame{
			width: 600rpx;
			height: 312rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			.title{
				margin-top: 38rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}
			.text{
				text-align: center;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}
			.button{
				width: 50%;
				font-weight: 400;
				font-size: 30rpx;
				color: #4A4A4A;
				text-align: center;
			}
			.line{
				margin-top: -32rpx;
				width: 1rpx;
				height: 97rpx;
				background: rgba(60,60,67,0.36);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}
		}
		.frame-record{
			margin-right: 27rpx;
			width: 113rpx;
			height: 41rpx;
			background: #15181D;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			.record-icon{
				width: 25rpx;
				height: 25rpx;
				// background: #FFFFFF;
				border: 1rpx solid #FFFFFF;
				border-radius: 50%;
				margin-left: 11rpx;
			}
			.icon{
				width: 10rpx;
				height: 10rpx;
				background: #FF3126;
				border-radius: 50%;
			}
			.text{
				margin-left: 9rpx;
				font-weight: normal;
				font-size: 19rpx;
				color: #FFFFFF;
			}
		}
		
		.record-tips{
			position: absolute;
			width: 686rpx;
			height: 191rpx;
			background: #15181D;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			color: #FFFFFF;
			.button{
				margin-right: 26rpx;
				width: 150rpx;
				height: 57rpx;
				background: #366EF4;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: normal;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
</style>
